<template>
  <div>
    <h1>Dome界面</h1>
    <li>num:{{ num }}</li>
    <p>{{ arr }}</p>
    <p v-for="item in arr" :key="item">{{ item }}</p>
    <p>name:{{ obj.name }}</p>
    <p>age:{{ obj.age }}</p>
    <p v-for="item in obj" :key="item">{{ item }}</p>
 

    <select>
      <!-- v-bind 单向绑定  用于标签属性的绑定 value/class  v-bind 简写为 : -->
      <option value="">请选择</option>
      <option v-bind:value="item.id"  v-for="item in city" :key="item.id">{{item.name}}</option>
  
    </select>
 
  </div>

  <!-- v-on:click可以简写为@click -->
  <input
    type="button"
    value="修改num数值"
    @click="fn"
    class="btn btn-primary"
  />
  <input
    type="button"
    value="修改arr数组"
    @click="fn1"
    class="btn btn-primary"
  />
  <input type="button"  value="修改obj对象数据"  @click="fn2" class="btn btn-primary" />
</template>

<script setup lang="ts">
//导入响应式布局
//ref函数可以定义响应式数据，主要声明基本类型的响应式数据:数值  布尔  字符串
// reactive函数可以定义响应式数据，主要声明引用类型的响应式数据:数组  对象
import { ref, reactive } from "vue";
let num = ref(100);
//定义一个函数
const fn = () => {
  num.value++;
};

//let message = "hello vue3";

//定义一个响应式数组
let arr = reactive([1, 2, 3, 4, 5]);
//修改数组arr中的数据
const fn1 = () => {
  //数组名[索引] = 新值
  arr[0] = 100;
  arr[1] = 130;
};

//定义一个响应式对象
let obj = reactive({
  name: "张三",
  age: 18,
});

//修改对象obj中的数据
const fn2 = () => {
  //对象名.属性名 = 新值
  obj.name = "李四";
};


let city = reactive([
{id:1,name:"北京"},
{id:2,name:"上海"},
{id:3,name:"南京"},
{id:4,name:"天津"},
]);
</script>

<style scoped>
</style>